<template>
  <div>
    <a-tabs
      v-model="activeKey"
      hide-add
      type="editable-card"
      @edit="onEdit"
      @change="changeTags"
    >
      <a-tab-pane
        v-for="pane in tabList"
        :key="pane.name"
        :closable="pane.closable"
      >
        <span slot="tab">
          {{ pane.label }}
          <a-icon
            style="color: #626262; margin-left: 5px"
            :class="styleFlag ? 'update' : ''"
            type="redo"
            @click.stop="update"
            v-if="pane.path == activeKey"
          />
        </span>
      </a-tab-pane>
      <a-dropdown slot="tabBarExtraContent">
        <a-menu slot="overlay" @click="handleMenuClick">
          <a-menu-item key="1">
            <a-icon
              style="font-size: 16px"
              type="vertical-align-middle"
            />关闭两侧菜单
          </a-menu-item>
          <a-menu-item key="2">
            <a-icon style="font-size: 16px" type="vertical-right" />关闭右侧菜单
          </a-menu-item>
          <a-menu-item key="3">
            <a-icon style="font-size: 16px" type="vertical-left" />关闭左侧菜单
          </a-menu-item>
        </a-menu>
        <a-button
          style="
            background: #66b1ff;
            color: #fff;
            border: none;
            margin-left: 8px;
            margin-right: 20px;
          "
          type="primary"
        >
          关闭菜单 <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </a-tabs>
  </div>
</template>
<script>
export default {
  inject: ["reload"],
  created() {
    sessionStorage.setItem("activePath", this.$route.path);
    this.getTasView();
  },
  data() {
    return {
      styleFlag: false,
      activeKey: sessionStorage.getItem("activePath"),
      newTabIndex: 0,
      tabList: [],
    };
  },

  methods: {
    update() {
      this.styleFlag = true;
      // this.$router.go(0);
      setTimeout(() => {
        this.reload();
      }, 1000);
    },
    handleMenuClick(e) {
      if (e.key === "1") {
        let arr = [];
        if (this.activeKey != this.tabList[0].name) {
          arr.push(this.tabList[0]);
        }
        this.tabList.forEach((item) => {
          if (item.name === this.activeKey) {
            arr.push(item);
          }
        });
        this.tabList = arr;
        sessionStorage.setItem("tags", JSON.stringify(this.tabList));
      } else if (e.key === "2") {
        this.currentIndex = 0;
        this.tabList.forEach((item, i) => {
          if (item.name === this.activeKey) {
            this.currentIndex = i;
          }
        });
        let arr = [];
        this.tabList.forEach((item, i) => {
          if (i <= this.currentIndex) {
            arr.push(item);
          }
        });
        this.tabList = arr;
        sessionStorage.setItem("tags", JSON.stringify(this.tabList));
      } else if (e.key === "3") {
        this.currentIndex = 0;
        this.tabList.forEach((item, i) => {
          if (item.name === this.activeKey) {
            this.currentIndex = i;
          }
        });
        let arr = [];
        if (this.activeKey != this.tabList[0].name) {
          arr.push(this.tabList[0]);
        }
        this.tabList.forEach((item, i) => {
          if (i >= this.currentIndex) {
            arr.push(item);
          }
        });
        this.tabList = arr;
        sessionStorage.setItem("tags", JSON.stringify(this.tabList));
      }
    },
    getTasView() {
      this.tabList = JSON.parse(sessionStorage.getItem("tags"));
      this.activeKey = sessionStorage.getItem("activePath");
    },
    changeTags(key) {
      this.$router.push(key);
      sessionStorage.setItem("activePath", key);
    },
    onEdit(targetKey, action) {
      this[action](targetKey);
    },
    // 1
    remove(targetKey) {
      let lastIndex;
      let oldActivePath = sessionStorage
        .getItem("activePath")
        .replace('"', "")
        .replace('"', "");
      let oldTabList = JSON.parse(sessionStorage.getItem("tags"));
      this.tabList.forEach((pane, i) => {
        if (pane.name === targetKey) {
          lastIndex = i - 1;
        }
      });
      for (let i = 0; i < oldTabList.length; i++) {
        let item = oldTabList[i];
        if (item.name === targetKey) {
          oldTabList.splice(i, 1);
          sessionStorage.setItem("tags", JSON.stringify(oldTabList));
        }
      }
      // 如果关闭的标签不是当前路由的话，就不跳转
      if (targetKey != oldActivePath) {
        this.tabList = JSON.parse(sessionStorage.getItem("tags"));
        this.$forceUpdate();
        return;
      }

      let length = oldTabList.length - 1;
      // 如果length为1，必然只剩下首页标签，此时关闭后，更新到首页
      if (length === 0) {
        // 同时存储菜单
        let tagPath = sessionStorage.getItem("tagPath");
        sessionStorage.setItem("activePath", tagPath);
        // tab页向左跳转
        this.$router.push(tagPath);
        // 不再向下执行
        return;
      }
      // 关闭的标签是最右边的话，往左边跳转一个
      if (lastIndex === length) {
        // 同时更新路径
        oldActivePath = oldTabList[lastIndex].name;
        sessionStorage.setItem("activePath", oldActivePath);
        // tab页向左跳转
        this.$router.push(oldTabList[lastIndex].name);
      } else {
        // 同时更新路径
        oldActivePath = oldTabList[lastIndex].name;
        // 同时存储菜单

        sessionStorage.setItem("activePath", oldActivePath);
        // tab页向右跳转
        this.$router.push(oldTabList[lastIndex].name);
      }
    },
  },
  watch: {
    "$route.path"() {
      this.activeKey = this.$route.path;
      this.tabList = JSON.parse(sessionStorage.getItem("tags"));
    },
  },
};
</script>
<style lang="less">
.update {
  animation: run 2s infinite;
}
@keyframes run {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* .ant-tabs {
  height: 100% !important;
} */
/* .ant-tabs .ant-tabs-top-content,
.ant-tabs .ant-tabs-bottom-content {
  height: 100%;
} */
.ant-tabs-bar {
  margin: 0 !important;
  margin-left: 16px !important;
}
/* .ant-tabs .ant-tabs-top-content > .ant-tabs-tabpane {
  height: 100%;
} */
</style>
